<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Row>
    <div class='main_item'>
      <div @click="dataShow('financeContractData')" id="moxx" class="main_item_title">
        <span style="font-weight:bold;" icon="md-arrow-dropdown"> 融资合同信息</span>
        <span style="float:right">
          <Icon type="md-arrow-dropdown" id="financeContractData_icon"></Icon>
        </span>
      </div>
      <div id="financeContractData" class="main_item_content_block">
        <div style="margin:30px 10px 10px 10px;">
          <Table border :columns="financeContractColumns" :data="financeContractData" style="width: 100%;"></Table>

          <!-- <div style="text-align:center;margin-top:16px;">
            <Page :total="contract.total" :current="contract.pageNum" :page-size="contract.pageSize" size="small" show-elevator show-sizer show-total @on-change="contractPageChange" @on-page-size-change="contractSizeChange"></Page>
          </div> -->
        </div>
      </div>
    </div>
    <Modal v-model="modal1" title="还款计划" width="800">
      <div style="height:450px;overflow: auto;">
        <Table border :columns="planColumns" :data="planData" style="width: 100%;"></Table>
      </div>
    </Modal>
    <Modal v-model="modal2" title="详情信息" width="800">
      <Form :label-width="220" inline style="height:450px;overflow: auto;">
        <!-- <FormItem label="担保账户">
          <Input :disabled="true" v-model="contractInfo.customerId" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="融资合同账户">
          <Input :disabled="true" v-model="contractInfo.customerId" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        </br> -->
        <FormItem label="贷款编号">
          <Input :disabled="true" v-model="contractInfo.loanId" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        </br>
        <FormItem label="状态">
          <Input :disabled="true" value="正常" placeholder="" style="width:150px" v-if="contractInfo.status === 0"></Input>
          <Input :disabled="true" value="逾期" placeholder="" style="width:150px" v-if="contractInfo.status === 1"></Input>
          <Input :disabled="true" value="结清" placeholder="" style="width:150px" v-if="contractInfo.status === 2"></Input>
          <Input :disabled="true" value="提前结清" placeholder="" style="width:150px" v-if="contractInfo.status === 3"></Input>
          <Input :disabled="true" value="核销" placeholder="" style="width:150px" v-if="contractInfo.status === 10"></Input>
        </FormItem>

        <FormItem label="描述">
          <Input :disabled="true" v-model="contractInfo.productName" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        </br>
        <FormItem label="摊销方法">
          <Input :disabled="true" value="等额本息" placeholder="" style="width:150px">
          </Input>
        </FormItem>

        <!-- <FormItem label="年利率">
          <Input :disabled="true" v-model="contractInfo.rate" placeholder="" style="width:150px">
          </Input>
        </FormItem> -->
        <FormItem label="延滞天数">
          <Input :disabled="true" v-model="contractInfo.delqDays" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        </br>
        <FormItem label="产品">
          <Input :disabled="true" v-model="contractInfo.productName" placeholder="" style="width:150px">
          </Input>
        </FormItem>
         <FormItem label="年利率">
          {{ contractInfo.rate*100}}%
        </FormItem>
        </br>
        </br>
        <FormItem label="金额">
          <Input :disabled="true" v-model="contractInfo.amount" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="结束日期">
          {{this.$util.loanModularFormatTime(contractInfo.endDate)}}
        </FormItem>
        </br>
        <FormItem label="期数">
          <Input :disabled="true" v-model="contractInfo.tenor" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="起始日期">
          {{this.$util.loanModularFormatTime(contractInfo.startDate)}}
        </FormItem>
        </br>
        <FormItem label="首次偿还金额">
          <Input :disabled="true" v-model="contractInfo.firstPaymentAmount" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="首次偿还日期">
          {{this.$util.loanModularFormatTime(contractInfo.firstPaymentDate)}}
        </FormItem>
        </br>
        <FormItem label="末次还款金额">
          <Input :disabled="true" v-model="contractInfo.lastPaymentAmount" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="末次还款日期">
          {{this.$util.loanModularFormatTime(contractInfo.lastPaymentDate)}}
        </FormItem>
        </br>
        <FormItem label="最后更新用户">
          <Input :disabled="true" v-model="contractInfo.updatedBy" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="最后更新时间">
          {{this.$util.loanModularFormatTime(contractInfo.updatedDate)}}
        </FormItem>
        </br>
        <Table border :columns="contractInfoColumns" :data="contractInfoAccountData" style="width: 100%;"></Table>
      </Form>
    </Modal>
    <Modal v-model="modal3" title="详情信息" width="800">
      <Form :label-width="220" inline style="height:450px;overflow: auto;">
        <FormItem label="客户编号">
          <Input :disabled="true" v-model="planInfo.customerId" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="代偿状态">
          {{this.repaymentType(planInfo.repaymentType)}}
        </FormItem>
        </br>
        <FormItem label="期数">
          <Input :disabled="true" v-model="planInfo.tenor" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="状态">
          {{this.statusName(planInfo.status)}}
        </FormItem>
        </br>
        <FormItem label="最后更新用户">
          <Input :disabled="true" v-model="planInfo.updatedBy" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="最迟还款日期">
          {{this.$util.loanModularFormatTime(planInfo.paymentDateLate)}}
        </FormItem>
        </br>
        <FormItem label="合同账户ID">
          <Input :disabled="true" v-model="planInfo.loanId" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="实际还款日期">
          {{this.$util.loanModularFormatTime(planInfo.paymentDateAct)}}
        </FormItem>
        </br>
        <FormItem label="延滞天数">
          <Input :disabled="true" v-model="planInfo.delqDays" placeholder="" style="width:150px">
          </Input>
        </FormItem>
        <FormItem label="最后更新时间">
          {{this.$util.loanModularFormatTime(planInfo.updatedDate)}}
        </FormItem>
        </br>
        <FormItem label="应还款日期">
          {{this.$util.loanModularFormatTime(planInfo.paymentDate)}}
        </FormItem>
        </br>
        <Table border :columns="financeDetailColumns" :data="financeDetailData" style="width: 100%;"></Table>
      </Form>
    </Modal>

  </Row>
</template>

<script>
export default {
  name: 'finance-contract',
  data () {
    return {
      modal1: false,
      modal2: false,
      modal3: false,
      plan: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        loanId: '',
        overdueCode: '',
        custCardNo: ''
      },
      contract: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        loanId: '',
        overdueCode: '',
        custCardNo: ''
      },
      planInfo: {},
      contractInfo: {},
      financeDetailColumns: [
        {
          key: 'type',
          align: 'center'
        },
        {
          title: '本金',
          key: 'principalCommon',
          align: 'center'
        },
        {
          title: '利息',
          key: 'interestCommon',
          align: 'center'
        },
        {
          title: '咨询费',
          key: 'consultingCommon',
          align: 'center'
        },
        {
          title: '管理费',
          key: 'managementCommon',
          align: 'center'
        },
        {
          title: '违约金',
          key: 'penaltyFeeCommon',
          align: 'center'
        },
        {
          title: '滞纳金',
          key: 'lateFeeCommon',
          align: 'center'
        }
      ],
      financeDetailData: [],
      contractInfoColumns: [
        {
          key: 'type',
          align: 'center'
        },
        {
          title: '本金',
          key: 'principalCommon',
          align: 'center'
        },
        {
          title: '利息',
          key: 'interestCommon',
          align: 'center'
        },
        {
          title: '咨询费',
          key: 'consultingCommon',
          align: 'center'
        },
        {
          title: '管理费',
          key: 'managementCommon',
          align: 'center'
        },
        {
          title: '违约金',
          key: 'penaltyFeeCommon',
          align: 'center'
        },
        {
          title: '滞纳金',
          key: 'lateFeeCommon',
          align: 'center'
        }
      ],
      contractInfoAccountData: [
      ],
      financeContractColumns: [
        {
          title: '合同ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '贷款编号',
          key: 'loanId',
          align: 'center'
        },
        {
          title: '合同状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) { /// 正常
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === 1) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === 2) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === 3) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.status === 10) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '当前期数',
          key: 'currTenor',
          align: 'center'
        },
        {
          title: '本金',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.principalOs + params.row.principal - params.row.principalWaive).toFixed(2))
          }
        },
        {
          title: '利息',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.interestOs + params.row.interest - params.row.interestWaive).toFixed(2))
          }
        },
        {
          title: '费用',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.managementFee + params.row.managementFeeOs - params.row.managementFeeWaive +
              params.row.consultingFee + params.row.consultingFeeOs - params.row.consultingFeeWaive +
              params.row.penaltyFee + params.row.penaltyFeeOs - params.row.penaltyFeeWaive +
              params.row.lateFee + params.row.lateFeeOs - params.row.lateFeeWaive +
              params.row.preTerminateFee + params.row.preTerminateFeeOs - params.row.preTerminateFeeWaive).toFixed(2))
          }
        },
        {
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  float: 'left'
                },
                on: {
                  click: () => {
                    var vm = this
                    var parsam = {
                      loanId: params.row.loanId
                    }
                    this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/planList', parsam).then(re => {
                      var data = re.data.data
                      vm.planData = data.planList || []
                      vm.plan.total = data.total
                    }).catch(er => {

                    })
                    vm.modal1 = true
                  }
                }
              }, ' 还款计划'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  float: 'right'
                },
                on: {
                  click: () => {
                    var vm = this
                    vm.modal2 = true
                    vm.contractInfo = vm.financeContractData[params.index]
                    vm.contractInfoAccountData = []
                    vm.contractInfoAccountData.push({ type: '计划收取', principalCommon: (vm.contractInfo.principal + vm.contractInfo.principalOs - vm.contractInfo.principalWaive), interestCommon: (vm.contractInfo.interest + vm.contractInfo.interestOs - vm.contractInfo.interestWaive), consultingCommon: (vm.contractInfo.consultingFee + vm.contractInfo.consultingFeeOs - vm.contractInfo.consultingFeeWaive), managementCommon: (vm.contractInfo.managementFee + vm.contractInfo.managementFeeOs - vm.contractInfo.managementFeeWaive), penaltyFeeCommon: (vm.contractInfo.penaltyFee + vm.contractInfo.penaltyFeeOs - vm.contractInfo.penaltyFeeWaive), lateFeeCommon: (vm.contractInfo.lateFee + vm.contractInfo.lateFeeOs - vm.contractInfo.lateFeeWaive) })
                    vm.contractInfoAccountData.push({ type: '已还金额', principalCommon: vm.contractInfo.principal, interestCommon: vm.contractInfo.interest, consultingCommon: vm.contractInfo.consultingFee, managementCommon: vm.contractInfo.managementFee, penaltyFeeCommon: vm.contractInfo.penaltyFee, lateFeeCommon: vm.contractInfo.lateFee })
                  }
                }
              }, ' 合同详情')
            ])
          }

        }

      ],
      financeContractData: [],
      planColumns: [
        {
          title: '期数',
          key: 'tenor',
          align: 'center',
          width: 100
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) { /// 正常
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === 1) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === 2) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === 3) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.status === 10) {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '总金额',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.managementFee - params.row.managementFeeWaive +
              params.row.consultingFee - params.row.consultingFeeWaive +
              params.row.penaltyFee - params.row.penaltyFeeWaive +
              params.row.lateFee - params.row.lateFeeWaive +
              params.row.principal - params.row.principalWaive +
              params.row.interest - params.row.interestWaive +
              params.row.preTerminateFee - params.row.preTerminateFeeWaive).toFixed(2))
          }
        },
        {
          title: '本金',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.principal - params.row.principalWaive).toFixed(2))
          }
        },
        {
          title: '利息',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.interest - params.row.interestWaive).toFixed(2))
          }
        },
        {
          title: '费用',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              props: {
                type: 'text',
                size: 'small'
              }
            }, (params.row.managementFee - params.row.managementFeeWaive +
              params.row.consultingFee - params.row.consultingFeeWaive +
              params.row.penaltyFee - params.row.penaltyFeeWaive +
              params.row.lateFee - params.row.lateFeeWaive).toFixed(2)
            )
          }
        },
        {
          title: '还款日期',
          key: 'paymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDate))
            ])
          }

        },
        {
          width: 100,
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.modal3 = true
                  vm.planInfo = vm.planData[params.index]
                  vm.financeDetailData = []
                  vm.financeDetailData.push({ type: '计划收取', principalCommon: (vm.planInfo.principal - vm.planInfo.principalWaive), interestCommon: (vm.planInfo.interest - vm.planInfo.interestWaive), consultingCommon: (vm.planInfo.consultingFee - vm.planInfo.consultingFeeWaive), managementCommon: (vm.planInfo.managementFee - vm.planInfo.managementFeeWaive), penaltyFeeCommon: (vm.planInfo.penaltyFee - vm.planInfo.penaltyFeeWaive), lateFeeCommon: (vm.planInfo.lateFee - vm.planInfo.lateFeeWaive) })
                  vm.financeDetailData.push({ type: '已还金额', principalCommon: vm.planInfo.principalAct, interestCommon: vm.planInfo.interestAct, consultingCommon: vm.planInfo.consultingFeeAct, managementCommon: vm.planInfo.managementFeeAct, penaltyFeeCommon: vm.planInfo.penaltyFeeAct, lateFeeCommon: vm.planInfo.lateFeeAct })
                }
              }
            }, '查看 ')
          }
        }

      ],
      planData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    var vm = this
    this.$ajax = this.$util.ajax()
    vm.plan.loanId = vm.accountTaskParams.loanId
    vm.plan.overdueCode = vm.accountTaskParams.overdueCode
    vm.plan.custCardNo = vm.accountTaskParams.custCardNo
    vm.contract.loanId = vm.accountTaskParams.loanId
    vm.contract.overdueCode = vm.accountTaskParams.overdueCode
    vm.contract.custCardNo = vm.accountTaskParams.custCardNo
    vm.initPage()
  },
  methods: {
    // planPageChange: function (pageNum) {
    //   var vm = this
    //   vm.plan.currentPage = pageNum
    //   vm.planInfoChange()
    // },
    // planSizeChange: function (pageLength) {
    //   var vm = this
    //   vm.plan.currentPage = pageLength
    //   vm.planInfoChange()
    // },
    // planInfoChange: function () {
    //   var vm = this
    //   this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/manage/service/planList', this.plan).then(re => {
    //     var data = re.data
    //     vm.planData = data.data.list
    //     vm.plan.total = data.data.total
    //   }).catch(er => {

    //   })
    // },
    contractPageChange: function (pageNum) {
      var vm = this
      vm.contract.pageNum = pageNum
      vm.initPage()
    },
    contractSizeChange: function (pageLength) {
      var vm = this
      vm.contract.pageSize = pageLength
      vm.initPage()
    },
    initPage () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/financingContract', this.contract).then(re => {
        var data = re.data
        vm.financeContractData = data.data.customerlist || []
        vm.contract.total = data.data.total
      }).catch(er => {

      })
    },
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    statusName (status) {
      if (status === 0) {
        return '正常'
      }
      if (status === 1) {
        return '逾期'
      }
      if (status === 2) {
        return '结清'
      }
      if (status === 3) {
        return '提前结清'
      }
      if (status === 10) {
        return '核销'
      }
    },
    repaymentType (repaymentType) {
      if (repaymentType === 3) { // 代偿
        return '结清'
      } else if (repaymentType === 4) {
        return '提前结清'
      } else {
        return '正常'
      }
    }
  },
  props: {
    accountTaskParams: Object
  }
}
</script>
<style lang="less">
.row-col-style {
  background-color: #dcdcdc;
  text-align: center;
  height: 100%;
}
</style>
